<template>
<div class="goodsOrderDelivery" v-if="model">
  <el-form ref="form" :model="model" :rules="rules">
    <el-descriptions :column="2" direction="vertical" border v-if="deliveryMode === 0">
      <el-descriptions-item>
        <template slot="label">
          收货人
        </template>
        {{model.receiverName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          收货电话
        </template>
        {{model.receiverPhone}}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">
          收货地址
        </template>
        {{[model.receiverProvince, model.receiverCity, model.receiverRegion].toString() + ' ' + model.receiverDetailAddress}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          配送方式
        </template>
        <el-form-item prop="deliveryCompanyCode">
          <el-select
            v-model="model.deliveryCompanyCode"
            filterable
            @change="setDeliveryName"
            clearable>
            <el-option
              v-for="item in deliveryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          物流单号
        </template>
        <el-form-item prop="deliverySn">
          <el-input v-model="model.deliverySn" clearable></el-input>
        </el-form-item>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="2" direction="vertical" border v-if="deliveryMode === 1">
      <el-descriptions-item :span="2">
        <template slot="label">
          自提地址
        </template>
        {{[model.receiverProvince, model.receiverCity, model.receiverRegion].toString() + ' ' + model.receiverDetailAddress}}
      </el-descriptions-item>
    </el-descriptions>
  </el-form>
</div>
</template>

<script>
export default {
  name: "goodsOrderDelivery",
  props:{
    orderId: String,
    deliveryMode:{
      type: Number,
      default: 0
    }
  },
  data(){
    return{
      model: null,
      rules: {
        deliveryCompanyCode: [
          {required: true, message: '请选择配送方式', trigger: 'change'},
        ],
        deliverySn: [
          {required: true, message: '物流单号不能为空', trigger: 'blur'}
        ],
      },
      deliveryOptions: []
    }
  },
  created(){
   this.initInfo();
   this.initLogistics();
  },
  methods:{
    initInfo(){
      this.$yAxios({
        url: this.$api.goods.deliveryInfo,
        data:{
          orderId: this.orderId,
        },
        loading: true
      }, info => {
        this.$set(this, 'model', info);
        this.model.deliveryCompanyCode = this.model.deliveryCompanyCode || '';
        this.model.deliverySn = this.model.deliverySn || '';
      })
    },
    initLogistics(){
      this.$yAxios({
        url: this.$api.common.logisticsList,
        data: {}
      }, info => {
        this.$set(this, 'deliveryOptions', info);
      })
    },
    setDeliveryName(val){
      if(val){
        let obj = this.deliveryOptions.find(o => o.value === val);
        this.model.deliveryCompany = obj ? obj.label : '';
      }else{
        this.model.deliveryCompany = '';
      }
    },
    sendDelivery(type, cbk){
      let url, msg;
      if(type === 'ADD'){
        msg = '发货成功';
        if(this.deliveryMode === 0){
          url = this.$api.goods.updateDelivery;
        }else if(this.deliveryMode === 1){
          url = this.$api.goods.goodsOrderStocking;
        }else{
          return;
        }
      }else if(type === 'EDIT'){
        url = this.$api.goods.updateDeliveryInfo;
        msg = '修改成功';
        this.$emit('refresh-tracking')
      }
      this.$refs['form'].validate(valid => {
        if(valid){
          this.$yAxios({
            url,
            data: Object.assign({orderId: this.orderId}, this.model)
          }, info => {
            this.$message({
              type: 'success',
              message: msg
            });
            cbk && cbk();
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.goodsOrderDelivery{
  /deep/.el-form-item{
    margin-bottom: 0;
    .el-select{
      width: 100%;
    }
  }
}
</style>